<template>
    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="用户昵称" prop="nickName">
                        <el-input v-model="form.nickName" placeholder="请输入用户昵称"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="归属部门" prop="deptId">
                        <el-select v-model="form.deptName" placeholder="请选择部门" clearable>
                            <el-option :value="deptData" style="height: auto;">
                                <el-tree ref="deptTree"
                                         :data="deptTreeData" :props="deptTreeProps"
                                         :show-checkbox="false"
                                         @node-click="selectDept">
                                </el-tree>
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="手机号码" prop="phonenumber">
                        <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
                        <el-input v-model="form.userName" placeholder="请输入用户名称"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
                        <el-input v-model="form.password" placeholder="请输入用户密码" type="password"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="用户性别">
                        <el-select v-model="form.sex" placeholder="请选择">
                            <el-option
                                    v-for="dict in sexOptions"
                                    :key="dict.dictValue"
                                    :label="dict.dictLabel"
                                    :value="dict.dictValue"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="状态">
                        <el-switch v-model="form.status"
                                   :active-value="0"
                                   :inactive-value="1"
                                   active-text="正常"
                                   inactive-text="停用"
                        ></el-switch>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="角色">
                        <el-select v-model="form.roleIds" multiple placeholder="请选择">
                            <el-option
                                    v-for="item in roleOptions"
                                    :key="item.roleId"
                                    :label="item.roleName"
                                    :value="item.roleId"
                                    :disabled="item.status == 1"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="备注">
                        <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import {treeSelect} from "/src/api/system/dept";
    import {addUser, updateUser, delUser} from '/src/api/system/user'

    export default {
        name: "update",
        emits: ['dialogStatusChanged'],
        props: {
            open: Boolean,
            //标题
            title: String,
            // 表单参数
            form: Object,
            //角色集合
            roleOptions: Array,
        },
        data() {
            return {
                // 状态数据字典
                statusOptions: [],
                // 性别状态字典
                sexOptions: [],
                //部门树数据
                deptTreeData: [],
                //部门树属性
                deptTreeProps: {
                    children: 'children',
                    label: 'label'
                },
                // 表单校验
                rules: {
                    userName: [
                        {required: true, message: "用户名称不能为空", trigger: "blur"}
                    ],
                    nickName: [
                        {required: true, message: "用户昵称不能为空", trigger: "blur"}
                    ],
                    password: [
                        {required: true, message: "用户密码不能为空", trigger: "blur"}
                    ],
                    email: [
                        {
                            type: "email",
                            message: "'请输入正确的邮箱地址",
                            trigger: ["blur", "change"]
                        }
                    ],
                    phonenumber: [
                        {
                            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                            message: "请输入正确的手机号码",
                            trigger: "blur"
                        }
                    ]
                },
                deptData: {},

            }
        },
        computed: {
            //监测部门ID
            monitorDeptId() {
                return this.open
            },
        },
        watch: {
            monitorDeptId(newVal) {
                if (newVal && this.form.deptId) {
                    //根据部门ID匹配部门信息
                    this.getDeptName(this.deptTreeData, this.form.deptId)
                }
            }
        },
        created() {
            this.getDicts("sys_normal_disable").then(response => {
                this.statusOptions = response.data;
            });
            this.getDicts("sys_user_sex").then(response => {
                this.sexOptions = response.data;
            });
            treeSelect().then((res) => {
                this.deptTreeData = res.data
            })
        },
        methods: {
            /** 提交按钮 */
            submitForm: function () {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if (this.form.userId != undefined) {
                            updateUser(this.form).then(response => {
                                this.msgSuccess("修改成功")
                                this.close()
                            });
                        } else {
                            addUser(this.form).then(response => {
                                this.msgSuccess("新增成功")
                                this.close()
                            });
                        }
                    }
                });
            },
            selectDept(data, node, nodeData) {
                this.deptData = data
                this.form.deptName = data.label
                this.form.deptId = data.id
            },
            cancel() {
                this.$emit('dialogStatusChanged', false)
            },
            //关闭
            close() {
                this.$emit('dialogStatusChanged', false)
            },
            //根据部门ID获取部门名称
            getDeptName(deptTree, deptId) {
                for (let i = 0; i < deptTree.length; i++) {
                    const deptInfo = deptTree[i]
                    if (deptInfo.id === deptId) {
                        this.form.deptName = deptInfo.label
                    }
                    if (deptInfo.children && deptInfo.children.length > 0) {
                        this.getDeptName(deptInfo.children, deptId)
                    }
                }
            }
        }
    }
</script>

<style scoped>

</style>
